<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{total_price}}</text></view>
				</view>
			</tui-list-cell>
			<radio-group @change="checks">
				<!-- #ifdef H5 -->
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio">
							<radio color="#ffa319" value="1" checked="checked"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY-->
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue" :class="{'iswx':iswx}">
						<image src="/static/images/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝支付</text>
						<view class="tui-radio">
							<radio color="#ffa319" value="2"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif -->
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="orange" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
		

	</view>
</template>

<script>
	
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		name: 'tPayWayss',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			show2: {
				type: Boolean,
				default: false
			},
			modal1: false,
			page: {
				type: Number,
				default: 1
			},
			total_price: "",
			recharge_type: '',
			is_pay_cost: '',
			is_jm: false,
			iswx: false,
			bankcode: '',
			pay_iswx: 2,
			banklist: [],
		},


		data() {
			return {
				//#ifdef H5
				pay_type: 1,
				// #endif
				//#ifdef APP-PLUS
				pay_type: 2,
				// #endif
			};
		},
		methods: {
			wxPay(data) {
				let that = this;
				if (isWxBrowser()) {
					let obj = {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
					}
					let callback_succ_func = function() {
						that.tui.toast('支付成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 800)
					};
					let callback_error_func = function() {
						that.tui.toast('支付失败');
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					};
					wxJsPay(obj, callback_succ_func, callback_error_func)
				} else {
					uni.showModal({
						title: "提示",
						content: "请使用微信打开进行支付",
						showCancel: false
					})
				}
			},
			popupCloses() {
				this.show2 = false
			},
			close() {
				this.$emit("close", {})
			},
			
			close2() {
				this.$emit("close", {})
			},

			show1() {
				this.modal1 = true;
			},
			hide1: function() {
				this.modal1 = false;
			},
			checkbankcode(e) {
				this.bankcode = e.detail.value;
			},
				
			cardclick(){
				uni.navigateTo({
					url: '../user/addbanks'
				});
			},
			btnPay() {
				let token = this.tui.getToken();
				let pays = {};
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.pay_iswx = 1;
				}else{
					this.pay_type=2;
				}
				// #endif

				pays = {
					token: token,
					money: this.total_price,
					pay_type: this.pay_type,
					pay_iswx: this.pay_iswx,
					bankcode: this.bankcode,
					recharge_type:this.recharge_type
				}
				let methods='balanceRecharge';
				let paytype = this.tui.request('user', 'post', pays, 1000, 1, '', methods);
				Promise.resolve(paytype).then((value) => {
					if (this.pay_type == 2) {
						/* 假如是app的话 */
						//#ifdef APP-PLUS
						plus.runtime.openURL(
							value.data.url
						);
						return;
						//#endif
						// #ifdef H5
										
						//将接口返回的Form表单显示到页面
						document.querySelector('body').innerHTML = value;
						//调用submit 方法
						document.forms['alipaysubmit'].submit();
						return;
						// #endif
					}
					if (this.pay_type == 3) {
                        /*汇聚支付*/
						if(value.code==10000){
							if(this.recharge_type==5){
								this.tui.toast('升级成功');
								setTimeout(() => {
									uni.switchTab({
									  url: '/pages/my/my'
									});
								}, 1000)
							}else{
								this.tui.toast(value.message);
								setTimeout(() => {
									uni.navigateTo({
										url: '../user/balanceList'
									});
								}, 1000)
							}
							
						}else{
							this.tui.toast(value.message);
						}
						return;
						/* 假如是app的话 */
						//#ifdef APP-PLUS
						let signIndex = value.search(/businessrecordnumber/);
						let strings = value.split('value="');
						//再次截圖字符串
						strings = strings[1].split('"/>');
						strings = strings[0];
						plus.runtime.openURL(
							"https://cash.tf56.com/gateway/pay/bankPayRedirect?businessrecordnumber=" + strings
						);
						return;
						//#endif
						// #ifdef H5

						document.querySelector('body').innerHTML = value;
						//调用submit 方法
						document.forms['pay_form'].submit();
						return;
						// #endif
					}
					if (value.code == 10000) {
						this.close();
						// #ifdef H5
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							//公众号支付
							this.wxPay(value.data);
							return;
						} else {
							location.href = value.data.payInfo;
						}
						// #endif
						//#ifdef APP-PLUS
						plus.runtime.openURL(value.data.mweb_url);
						//#endif
						//#ifdef MP-WEIXIN
						//小程序支付

						//#endif

					} else {
						this.tui.toast(value.message);
					}
				})
				//this.tui.href("/pages/success/success")
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.istrue {
		display: block;
	}

	.iswx {
		display: none !important;
	}

	.tui-modal-box {
		padding: 100% !important;
	}

	.tui-pay-amuont {
		color: #ffad10;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-modal-custom-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-list-cells {
		padding: 2rpx 0 !important;
		height: 90rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
